<template>
  <view class="normal-login-container">
    <view class="logo-content">
      <text class="title">欢迎登录巡检平台</text>
    </view>
		<view class="login-form-content">
			<u-form :model="form" class="uForm" ref="uForm" :border-bottom="false" label-position="top">
				<u-form-item :border-bottom="false" label="组织" prop="deptCode">
					<uni-data-select
						class="select-uni"
						placeholder="请选择组织"
						v-model="form.deptCode"
						:localdata="range"
						@change="change"
					></uni-data-select>
				</u-form-item>
				<u-form-item :border-bottom="false" label="账号" prop="username">
					<u-field v-model="form.username" label-width="0" placeholder="请输入" />
				</u-form-item>
				<u-form-item :border-bottom="false" label="密码" prop="password">
					<u-field type="password" v-model="form.password" label-width="0" placeholder="请输入密码" />
				</u-form-item>
				<view class="checkbox">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox v-model="checked">记住用户名</u-checkbox>
					</u-checkbox-group>
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox v-model="checked">记住密码</u-checkbox>
					</u-checkbox-group>
				</view>
			</u-form>
			<button class="submit" @click="pwdLogin">登录</button>
			<view class="footer">
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox v-model="checked"></u-checkbox>
				</u-checkbox-group>
				<view class="footer-size">
					<text class="footer-login">登录即表示同意</text>
					<text class="footer-file">《用户服务协议》、</text>
					<text class="footer-file">《隐私协议》</text>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
  // import { getCodeImg } from '@/api/login'

  export default {
    data() {
      return {
        codeUrl: "",
        captchaEnabled: true,
        // 用户注册开关
        register: false,
        globalConfig: getApp().globalData.config,
        form: {
					deptCode: "",
          username: "",
          password: "",
					check: true
        },
				checked: false,
				rules: {
					deptCode: [
						{
							required: true,
							message: '此为必填字段'
						},
					],
					username: [
						{
							required: true,
							message: '此为必填字段'
						},
					],
					password: [
						{
							required: true,
							message: '此为必填字段',
							trigger: ['blur', 'change'],
						}
					]
				},
				range: [],
				value: '',
				range1: [
					{ value: 0, text: "" }
				],
				value1: ' ',
				url: ''
      }
    },
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
    created() {
      // this.getCode()
			this.getDeviceList()
    },
    methods: {
			change(e) {
				console.log("e:", e);
			},
			checkboxGroupChange() {
				
			},
			getDeviceList() {
				this.$u.api.deviceList({show: 1, status: 0}).then(response => {
					if (response.data.length) {
						this.range = response.data.map(item => {
							return {value: item.deptCode, text: item.deptName}
						})
					}
				});
			},
			// 用户注册
			handleUserRegister() {
				this.$tab.redirectTo(`/pages/register`)
			},
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 获取图形验证码
      getCode() {
        // getCodeImg().then(res => {
        //   this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        //   if (this.captchaEnabled) {
        //     this.codeUrl = 'data:image/gif;base64,' + res.img
        //     this.loginForm.uuid = res.uuid
        //   }
        // })
      },
      // 登录方法
      // 密码登录
      async pwdLogin() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$u.api.login(this.form).then(res => {
							if (res.code == 200 && res.token) {
								this.$u.vuex('vuex_token', res.token)
								this.$u.api.getInfo().then(res => {
									if (res.code == 200 && res.user) {
										this.$u.vuex('vuex_user', res.user)
										uni.switchTab({
											url: '/pages/sys/home/index'
										})
									}
								})
							} else {
								this.$u.toast(res.msg)
							}
						})
					}
				});
        // this.$store.dispatch('Login', this.loginForm).then(() => {
        //   this.$modal.closeLoading()
        //   this.loginSuccess()
        // }).catch(() => {
        //   if (this.captchaEnabled) {
        //     this.getCode()
        //   }
        // })
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.reLaunch('/pages/index')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff;
  }

  .normal-login-container {
    width: 100%;
		background: url('@/static/login-bg.png') no-repeat;
		background-size: 100% 100%;
		height: 100vh;

    .logo-content {

      .title {
        font-weight: 600;
        font-size: 48rpx;
        color: #333333;
        line-height: 66rpx;
        font-style: normal;
				margin-top: 30%;
				margin-left: 10%;
				display: inline-block;
      }
    }

    .login-form-content {
      margin: 40rpx auto;
      margin-top: 15%;
      width: 80%;
			
			::v-deep .u-form-item--left__content__label {
				line-height: 1.5;
				margin-bottom: 12rpx;
			}
			
			::v-deep .u-field {
				padding: 0;
				width: 100%;
			}
			::v-deep .u-flex {
				margin: 0 !important;
			}
			.u-checkbox-group {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

    //   .input-item {
    //     margin: 20px auto;
    //     // background-color: #f5f6f7;
    //     height: 56px;
				// border-bottom: 1px solid rgba(0,0,0,0.1);
    //     // border-radius: 20px;

    //     .icon {
    //       font-size: 38rpx;
    //       margin-left: 10px;
    //       color: #999;
    //     }

    //     .input {
    //       width: 100%;
    //       font-size: 14px;
    //       line-height: 20px;
    //       text-align: left;
    //     }
				// .uni-input-placeholder {
				// 	font-weight: 500;
				// 	font-size: 16px;
				// 	color: #999999;
				// 	line-height: 24px;
				// 	letter-spacing: 1px;
				// 	font-style: normal;
				// }
				// .input-label {
				// 	display: inline-block;
				// 	margin-bottom: 10px;
				// }
    //   }
		
			::v-deep .uni-input-placeholder {
				font-weight: 500;
				font-size: 32rpx;
				color: #999999;
				line-height: 48rpx;
				letter-spacing: 1px;
				font-style: normal;
			}
			
			::v-deep .uni-select__input-placeholder {
				font-weight: 500;
				font-size: 16px;
				color: #999999;
				line-height: 48rpx;
				letter-spacing: 1px;
				font-style: normal;
			}
		
			.select-uni {
				border-bottom: 1px solid rgba(0,0,0,0.1);
				::v-deep .uni-select {
					border: 0;
					padding: 0;
				}
			}
			::v-deep .uni-forms-item__label {
				height: 40rpx;
			}
			.checkbox {
				margin-bottom: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				::v-deep .u-checkbox__label {
					margin-right: 0;
				}
			}
			.footer {
				width: 100%;
				position: fixed;
				bottom: 60rpx;
				left: 50%;
				transform: translate(-50%, 0);
				display: flex;
				justify-content: center;
				align-items: center;
				.u-checkbox {
					width: 36rpx !important;
					height: 36rpx !important;
				}
				.footer-size {
					text-align: center;
					.footer-login {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rrpx;
						color: #999999;
						line-height: 36rpx;
						font-style: normal;
						margin-left: 10rpx;
					}
					.footer-file {
						font-weight: 400;
						font-size: 24rpx;
						color: #F89132;
						line-height: 40rpx;
						font-style: normal;
					}
				}
			}

      .login-btn {
        margin-top: 80rpx;
        height: 90rpx;
      }
      
      .reg {
        margin-top: 30rpx;
      }
      
      .xieyi {
        color: #333;
        margin-top: 40rpx;
      }
      
      .login-code {
        height: 76rpx;
        float: right;
      
        .login-code-img {
          height: 76rpx;
          position: absolute;
          margin-left: 20rpx;
          width: 200rpx;
        }
      }
	    .submit {
		    width: 310px;
		    height: 88rpx;
				line-height: 88rpx;
		    background: linear-gradient( 270deg, #3C7EFF 0%, #6FB5FF 100%);
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 34rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
	    }
    }
  }

</style>
